<template>
  <!-- 学习计划主容器 -->
  <div class="study-plan">
    <main class="main-content">
      <div class="container">
        <!-- 页面标题和新建按钮区域 -->
        <div class="page-header">
          <h1>学习计划</h1>
          <div class="header-actions">
            <!-- 新建计划按钮 -->
            <el-button type="primary" @click="showCreateDialog">
              <el-icon>
                <Plus />
              </el-icon>
              新建计划
            </el-button>
          </div>
        </div>

        <!-- 计划标签页：进行中和已完成 -->
        <div class="plan-tabs">
          <!-- 将标签页头部单独提取出来放在卡片上方 -->
          <div class="tab-buttons">
            <el-button
              :type="activeTab === 'active' ? 'primary' : ''"
              @click="activeTab = 'active'"
            >
              进行中
            </el-button>
            <el-button
              :type="activeTab === 'completed' ? 'primary' : ''"
              @click="activeTab = 'completed'"
            >
              已完成
            </el-button>
          </div>

          <!-- 计划卡片内容区域 -->
          <div class="plans-content">
            <!-- 进行中计划内容 -->
            <div v-if="activeTab === 'active'" class="plans-grid">
              <!-- 遍历显示每个进行中的计划 -->
              <div
                v-for="plan in activePlans"
                :key="plan.planId"
                class="plan-card"
              >
                <!-- 计划头部区域（标题和删除按钮） -->
                <div class="plan-header">
                  <h3>{{ plan.planName }}</h3>
                  <el-button
                    circle
                    size="small"
                    @click="handleDeletePlan(plan.planId)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </div>

                <!-- 计划进度条区域 -->
                <div class="plan-progress">
                  <div class="progress-info">
                    <span>完成度</span>
                    <span>{{ calculateProgress(plan) }}%</span>
                  </div>
                  <el-progress
                    :percentage="calculateProgress(plan)"
                    :show-text="false"
                  />
                </div>

                <!-- 计划任务列表区域 -->
                <div class="plan-tasks">
                  <div class="tasks-header">
                    <span>学习内容</span>
                  </div>
                  <div class="task-list">
                    <!-- 显示前3周的学习内容 -->
                    <div
                      v-for="(week, index) in plan.weeks.slice(0, 3)"
                      :key="index"
                      class="task-item"
                    >
                      <span>{{ week.title }} (第{{ week.week }}周)</span>
                      <span class="task-duration">
                        {{ getCompletedContentCount(week) }}/{{
                          week.content.length
                        }}项
                      </span>
                    </div>
                    <!-- 如果超过3周，显示剩余周数 -->
                    <div v-if="plan.weeks.length > 3" class="more-tasks">
                      还有 {{ plan.weeks.length - 3 }} 周内容...
                    </div>
                  </div>
                </div>

                <!-- 计划元信息（创建时间等） -->
                <div class="plan-meta">
                  <div class="meta-item">
                    <el-icon>
                      <Calendar />
                    </el-icon>
                    <span>{{ formatDate(plan.createTime) }}</span>
                  </div>
                </div>

                <!-- 计划操作按钮 -->
                <div class="plan-actions">
                  <el-button size="small" @click="viewPlanDetail(plan)"
                    >查看详情</el-button
                  >
                  <el-button
                    size="small"
                    type="primary"
                    @click="startStudy(plan)"
                    >开始学习</el-button
                  >
                </div>
              </div>
            </div>

            <!-- 已完成计划内容 -->
            <div v-if="activeTab === 'completed'" class="plans-grid">
              <!-- 遍历显示每个已完成的计划 -->
              <div
                v-for="plan in completedPlans"
                :key="plan.planId"
                class="plan-card completed"
              >
                <div class="plan-header">
                  <h3>{{ plan.planName }}</h3>
                  <!-- 已完成标签 -->
                  <el-tag type="success">已完成</el-tag>
                </div>
                <p class="plan-description">
                  完成进度: {{ calculateProgress(plan) }}%
                </p>
                <!-- 计划操作按钮 -->
                <div class="plan-actions">
                  <el-button size="small" @click="viewPlanDetail(plan)"
                    >查看详情</el-button
                  >
                </div>
                <div class="completion-info">
                  <el-icon color="#67c23a">
                    <Check />
                  </el-icon>
                  <span>于 {{ formatDate(plan.updateTime) }} 完成</span>
                </div>
              </div>
            </div>

            <!-- 空状态：没有计划时显示的内容 -->
            <div v-if="getCurrentPlans().length === 0" class="empty-state">
              <el-icon size="60" color="#c0c4cc">
                <Document />
              </el-icon>
              <p>{{ getEmptyMessage() }}</p>
              <el-button type="primary" @click="showCreateDialog"
                >创建第一个学习计划</el-button
              >
            </div>
          </div>
        </div>

        <!-- 计划详情弹窗组件 -->
        <PlanDetailDialog
          :plan="currentPlan"
          :show="showDetailDialog"
          @update:show="showDetailDialog = $event"
          @start-study="startStudy"
          @update-plan="handlePlanUpdate"
        />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
// 导入Vue相关功能
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";

// 导入状态管理
import { usePlanStore, useUserStore } from "@/stores";

// 导入Element Plus组件
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Plus,
  Calendar,
  Check,
  Document,
  Delete,
} from "@element-plus/icons-vue";

// 导入API方法
import { selectPlansByUserId, selectPlanById, deletePlan } from "@/api/plan";

// 导入子组件
import PlanDetailDialog from "./PlanDetailDialog.vue";

// 初始化路由和状态管理
const router = useRouter();
const userStore = useUserStore();
const planStore = usePlanStore();

// 响应式状态定义
const activeTab = ref("active"); // 当前激活的标签页
const showDetailDialog = ref(false); // 是否显示详情弹窗
const allPlans = ref<any[]>([]); // 所有计划数据
const currentPlan = ref<any>(null); // 当前选中的计划

/**
 * 显示创建计划对话框
 * 跳转到AI助手页面创建新计划
 */
const showCreateDialog = () => {
  // 将消息存入 localStorage
  localStorage.setItem("autoSendMessage", "我想制定学习计划");
  // 跳转到AI助手页面
  router.push("/ai");
};

// 计算属性：过滤出进行中和已完成的计划
const activePlans = computed(() =>
  allPlans.value.filter((plan) => plan.status === "active")
);
const completedPlans = computed(() =>
  allPlans.value.filter((plan) => plan.status === "completed")
);

/**
 * 格式化计划数据
 * @param plan 原始计划数据
 * @returns 格式化后的计划数据
 */
const formatPlanData = (plan: any) => {
  try {
    // 解析计划内容JSON字符串
    const content =
      typeof plan.planContent === "string"
        ? JSON.parse(plan.planContent)
        : plan.planContent;
    return {
      ...plan,
      weeks: content.weeks || [], // 周计划数据
      advice: content.advice || [], // 建议数据
      status: plan.planProgress >= 100 ? "completed" : "active", // 根据进度设置状态
    };
  } catch (e) {
    console.error("解析计划内容失败:", e);
    return {
      ...plan,
      weeks: [],
      advice: [],
      status: "active",
    };
  }
};

/**
 * 获取已完成的周内容数量
 * @param week 周数据对象
 * @returns 已完成的内容数量
 */
const getCompletedContentCount = (week: any) => {
  if (!week.content) return 0;
  return week.content.filter((item: any) => item.status).length;
};

/**
 * 计算计划完成进度百分比
 * @param plan 计划对象
 * @returns 完成百分比
 */
const calculateProgress = (plan: any) => {
  if (!plan.weeks) return 0;
  let totalTasks = 0;
  let completedTasks = 0;

  // 计算总任务数和已完成任务数
  plan.weeks.forEach((week: any) => {
    if (week.content) {
      totalTasks += week.content.length;
      completedTasks += week.content.filter((item: any) => item.status).length;
    }
  });

  return totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
};

/**
 * 获取当前标签页对应的计划列表
 * @returns 当前标签页的计划列表
 */
const getCurrentPlans = () => {
  switch (activeTab.value) {
    case "active":
      return activePlans.value;
    case "completed":
      return completedPlans.value;
    default:
      return [];
  }
};

/**
 * 获取空状态提示消息
 * @returns 对应的提示消息
 */
const getEmptyMessage = () => {
  switch (activeTab.value) {
    case "active":
      return "暂无进行中的学习计划";
    case "completed":
      return "暂无已完成的学习计划";
    default:
      return "暂无学习计划";
  }
};

/**
 * 格式化日期显示
 * @param dateStr 日期字符串
 * @returns 格式化后的日期字符串
 */
const formatDate = (dateStr: string) => {
  if (!dateStr) return "未设置";
  return new Date(dateStr).toLocaleDateString();
};

/**
 * 处理删除计划操作
 * @param planId 计划ID
 */
const handleDeletePlan = async (planId: number) => {
  try {
    // 显示确认对话框
    await ElMessageBox.confirm(
      "确定要删除这个学习计划吗？删除后将无法恢复",
      "确认删除",
      {
        confirmButtonText: "确认删除",
        cancelButtonText: "取消",
        type: "warning",
      }
    );
    //删除pinia中的计划
    // planStore
    planStore.setCurrentPlan(null);
    // 调用API删除计划
    const res = await deletePlan(planId);
    if (res.code === 200) {
      // 从列表中移除已删除的计划
      allPlans.value = allPlans.value.filter((plan) => plan.planId !== planId);
      ElMessage.success("计划已删除");

      // 如果当前查看的计划被删除，关闭详情弹窗
      if (currentPlan.value?.planId === planId) {
        showDetailDialog.value = false;
      }
    } else {
      ElMessage.error(res.msg || "删除计划失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除计划失败:", error);
      ElMessage.error("删除计划失败");
    }
  }
};

/**
 * 查看计划详情
 * @param plan 计划对象
 */
const viewPlanDetail = async (plan: any) => {
  try {
    // 通过API获取计划详情
    const res = await selectPlanById(plan.planId);
    if (res.code === 200 && res.data) {
      currentPlan.value = formatPlanData(res.data);
      showDetailDialog.value = true;
    } else {
      ElMessage.error(res.msg || "获取计划详情失败");
    }
  } catch (error) {
    console.error("获取计划详情失败:", error);
    ElMessage.error("获取计划详情失败");
  }
};

/**
 * 开始学习计划
 * @param plan 计划对象
 */
const startStudy = (plan: any) => {
  // 保存当前计划到状态管理
  planStore.setCurrentPlan(plan);
  // 跳转到学习室页面
  router.push("/study-room");
};

/**
 * 处理计划更新
 * @param updatedPlan 更新后的计划对象
 */
const handlePlanUpdate = (updatedPlan: any) => {
  // 更新计划列表中的对应计划
  const index = allPlans.value.findIndex(
    (p) => p.planId === updatedPlan.planId
  );
  if (index !== -1) {
    allPlans.value[index] = { ...updatedPlan };
  }
};

/**
 * 加载计划列表
 */
const loadPlans = async () => {
  try {
    // 通过API获取用户的所有计划
    const res = await selectPlansByUserId(userStore.currentUser.userId);
    if (res.code === 200 && res.data) {
      // 格式化计划数据并保存
      allPlans.value = res.data.map(formatPlanData);
    } else {
      ElMessage.error(res.msg || "获取学习计划失败");
      allPlans.value = [];
    }
  } catch (error) {
    console.error("获取学习计划失败:", error);
    ElMessage.error("获取学习计划失败");
    allPlans.value = [];
  }
};

// 组件挂载时加载计划数据
onMounted(async () => {
  loadPlans();
});
</script>

<style scoped>
/* 主容器样式 - 确保学习计划页面撑满整个视口高度 */
.study-plan {
  min-height: 100vh; /* 最小高度为视口高度 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

/* 主要内容区域样式 */
.main-content {
  flex: 1; /* 占据剩余空间 */
  padding: 40px 0; /* 上下内边距 */
}

/* 内容容器样式 - 限制最大宽度并居中 */
.container {
  max-width: 1200px; /* 最大宽度限制 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 20px; /* 左右内边距 */
}

/* 页面头部样式 - 包含标题和操作按钮 */
.page-header {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 40px; /* 底部外边距 */
}

/* 页面标题样式 */
.page-header h1 {
  margin: 0; /* 移除默认外边距 */
  color: #2c3e50; /* 主标题颜色 */
  font-size: 2.5rem; /* 标题字体大小 */
}

/* 计划标签页容器样式 */
.plan-tabs {
  background: white; /* 白色背景 */
  border-radius: 12px; /* 圆角边框 */
  padding: 30px; /* 内边距 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); /* 阴影效果 */
}

/* 标签按钮区域样式 */
.tab-buttons {
  display: flex;
  gap: 12px; /* 按钮间距 */
  margin-bottom: 24px; /* 底部外边距 */
}

/* 计划卡片网格布局 */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* 自适应列宽 */
  gap: 24px; /* 卡片间距 */
}

/* 计划卡片基础样式 */
.plan-card {
  background: #fafafa; /* 浅灰色背景 */
  border: 1px solid #e4e7ed; /* 边框 */
  border-radius: 12px; /* 圆角 */
  padding: 24px; /* 内边距 */
  transition: all 0.3s ease; /* 过渡动画 */
}

/* 卡片悬停效果 */
.plan-card:hover {
  transform: translateY(-2px); /* 上移效果 */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* 悬停阴影 */
}

/* 已完成计划卡片特殊样式 */
.plan-card.completed {
  background: #f0f9ff; /* 浅蓝色背景 */
  border-color: #67c23a; /* 绿色边框 */
}

/* 计划卡片头部样式 */
.plan-header {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: flex-start; /* 顶部对齐 */
  margin-bottom: 12px; /* 底部外边距 */
}

/* 计划标题样式 */
.plan-header h3 {
  margin: 0; /* 移除默认外边距 */
  color: #2c3e50; /* 标题颜色 */
  font-size: 1.2rem; /* 字体大小 */
}

/* 进度条区域样式 */
.plan-progress {
  margin-bottom: 20px; /* 底部外边距 */
}

/* 进度信息文字样式 */
.progress-info {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 8px; /* 底部外边距 */
  font-size: 14px; /* 字体大小 */
  color: #7f8c8d; /* 文字颜色 */
}

/* 任务列表区域样式 */
.plan-tasks {
  margin-bottom: 20px; /* 底部外边距 */
}

/* 任务列表标题样式 */
.tasks-header {
  font-size: 14px; /* 字体大小 */
  color: #7f8c8d; /* 文字颜色 */
  margin-bottom: 12px; /* 底部外边距 */
}

/* 任务列表容器样式 */
.task-list {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  gap: 8px; /* 子项间距 */
}

/* 单个任务项样式 */
.task-item {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 8px 12px; /* 内边距 */
  background: white; /* 白色背景 */
  border-radius: 6px; /* 圆角 */
}

/* 任务持续时间文字样式 */
.task-duration {
  color: #909399; /* 文字颜色 */
  font-size: 12px; /* 字体大小 */
}

/* 更多任务提示样式 */
.more-tasks {
  color: #909399; /* 文字颜色 */
  font-size: 12px; /* 字体大小 */
  text-align: center; /* 居中 */
  padding: 8px; /* 内边距 */
}

/* 计划元信息区域样式 */
.plan-meta {
  display: flex;
  gap: 16px; /* 子项间距 */
  margin-bottom: 20px; /* 底部外边距 */
}

/* 单个元信息项样式 */
.meta-item {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 4px; /* 图标和文字间距 */
  color: #7f8c8d; /* 文字颜色 */
  font-size: 14px; /* 字体大小 */
}

/* 完成信息样式 */
.completion-info {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 8px; /* 图标和文字间距 */
  color: #67c23a; /* 成功颜色 */
  font-size: 14px; /* 字体大小 */
  margin-top: 12px; /* 顶部外边距 */
}

/* 计划操作按钮区域样式 */
.plan-actions {
  display: flex;
  gap: 12px; /* 按钮间距 */
  justify-content: flex-end; /* 右对齐 */
}

/* 空状态容器样式 */
.empty-state {
  text-align: center; /* 居中 */
  padding: 60px 20px; /* 内边距 */
  color: #909399; /* 文字颜色 */
}

/* 空状态提示文字样式 */
.empty-state p {
  margin: 20px 0; /* 上下外边距 */
  font-size: 16px; /* 字体大小 */
}

/* 响应式设计 - 移动端适配 */
@media (max-width: 768px) {
  /* 移动端网格布局调整为单列 */
  .plans-grid {
    grid-template-columns: 1fr; /* 单列布局 */
    gap: 16px; /* 调整间距 */
  }

  /* 移动端页面头部调整为垂直布局 */
  .page-header {
    flex-direction: column; /* 垂直排列 */
    gap: 16px; /* 子项间距 */
    align-items: stretch; /* 拉伸对齐 */
  }

  /* 移动端标签页内边距调整 */
  .plan-tabs {
    padding: 20px; /* 减小内边距 */
  }

  /* 移动端标签按钮调整为垂直布局 */
  .tab-buttons {
    flex-direction: column;
  }
}
</style>
